<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Dashboard V.1 | Kiaalap - Kiaalap Admin Template</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- favicon
		============================================ -->
    <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">
    <!-- Google Fonts
		============================================ -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,700,900" rel="stylesheet">
    <!-- Bootstrap CSS
		============================================ -->
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <!-- Lobibox CSS
        ============================================ -->
    <link rel="stylesheet" href="css/notifications/Lobibox.min.css">

    <!-- Bootstrap CSS
		============================================ -->
    <link rel="stylesheet" href="css/font-awesome.min.css">


    <!-- DatetimePicker CSS
        ============================================ -->
    <link rel="stylesheet" href="css/datetimepicker/bootstrap-datetimepicker.min.css">

    <!-- owl.carousel CSS
		============================================ -->
    <link rel="stylesheet" href="css/owl.carousel.css">
    <link rel="stylesheet" href="css/owl.theme.css">
    <link rel="stylesheet" href="css/owl.transitions.css">
    <!-- animate CSS
		============================================ -->
    <link rel="stylesheet" href="css/animate.css">
    <!-- normalize CSS
		============================================ -->
    <link rel="stylesheet" href="css/normalize.css">
    <!-- meanmenu icon CSS
		============================================ -->
    <link rel="stylesheet" href="css/meanmenu.min.css">
    <!-- main CSS
		============================================ -->
    <link rel="stylesheet" href="css/main.css">
    <!-- educate icon CSS
		============================================ -->
    <link rel="stylesheet" href="css/educate-custon-icon.css">
    <!-- morrisjs CSS
		============================================ -->
    <link rel="stylesheet" href="css/morrisjs/morris.css">
    <!-- mCustomScrollbar CSS
		============================================ -->
    <link rel="stylesheet" href="css/scrollbar/jquery.mCustomScrollbar.min.css">
    <!-- metisMenu CSS
		============================================ -->
    <link rel="stylesheet" href="css/metisMenu/metisMenu.min.css">
    <link rel="stylesheet" href="css/metisMenu/metisMenu-vertical.css">
    <!-- calendar CSS
		============================================ -->
    <link rel="stylesheet" href="css/calendar/fullcalendar.min.css">
    <link rel="stylesheet" href="css/calendar/fullcalendar.print.min.css">

    <!-- form CSS
		============================================ -->
    <link rel="stylesheet" href="css/form/all-type-forms.css">

    <!-- style CSS
		============================================ -->
    <link rel="stylesheet" href="css/style.css">
    <!-- responsive CSS
		============================================ -->
    <link rel="stylesheet" href="css/responsive.css">
    <!-- modernizr JS
		============================================ -->
    <script src="js/jquery.min.js"></script>

    <script src="js/vendor/modernizr-2.8.3.min.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/echarts.min.js"></script>
    <style>
        .modal-dialog {
            width: 680px;
        }

        .pagination {
            margin-top: 0;
            margin-bottom: 0;
        }
        /*#modal{*/
        /*    position: relative;*/
        /*}*/
        #status {
            position: absolute;
            top: 70%;
            left: 43%;
            transform: translate(-50%,-50%);
        }
    </style>


</head>

<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
    your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Start Left menu area -->
<div class="left-sidebar-pro">
    <nav id="sidebar" class="">
        <div class="sidebar-header">
            <a href="index.html"><img class="main-logo" src="img/logo/logo.png" alt=""/></a>
            <strong><a href="index.html"><img src="img/logo/logosn.png" alt=""/></a></strong>
        </div>
        <div class="left-custom-menu-adp-wrap comment-scrollbar">
            <nav class="sidebar-nav left-sidebar-menu-pro">
                <ul class="metismenu" id="menu1">
                    <li class="active">
                        <a class="has-arrow" href="index.html">
                            <span class="fa fa-id-card"></span>
                            <span class="mini-click-non">用户信息</span>
                        </a>
                        <ul class="submenu-angle" aria-expanded="true">
                            <li><a href="dataStatistics.html"><span class="mini-sub-pro">图表信息统计</span></a></li>
                            <li><a href="index.html"><span class="mini-sub-pro">用户列表</span></a></li>
                            <li><a href="goodsManager.html"><span class="mini-sub-pro">商品列表</span></a></li>
                            <li><a href="order.html"><span class="mini-sub-pro">订单管理</span></a></li>
                            <li><a href="payPage.html"><span class="mini-sub-pro">支付流水列表</span></a></li>
                            <li><a href="logManagement.html"><span class="mini-sub-pro">日志管理</span></a></li>
                            <li><a href="dataPush.html"><span class="mini-sub-pro">级光推送</span></a></li>

                        </ul>
                    </li>
                    <li>
                        <a title="Landing Page" href="sysUser.html" aria-expanded="false"><span
                                class="fa fa-user-circle-o" aria-hidden="true"></span> <span
                                class="mini-click-non">系统用户</span></a>
                    </li>

                </ul>
            </nav>
        </div>
    </nav>
</div>
<!-- End Left menu area -->
<!-- Start Welcome area -->
<div class="all-content-wrapper">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="logo-pro">
                    <a href="index.html"><img class="main-logo" src="img/logo/logo.png" alt=""/></a>
                </div>
            </div>
        </div>
    </div>
    <div class="header-advance-area">
        <div class="header-top-area">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="header-top-wraper">
                            <div class="row">
                                <div class="col-lg-1 col-md-0 col-sm-1 col-xs-12">
                                    <div class="menu-switcher-pro">
                                        <button type="button" id="sidebarCollapse"
                                                class="btn bar-button-pro header-drl-controller-btn btn-info navbar-btn">
                                            <i class="fa fa-bars"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-7 col-sm-6 col-xs-12">
                                    <div class="header-top-menu tabl-d-n">
                                        <ul class="nav navbar-nav mai-top-nav">
                                            <li class="nav-item"><a href="#" class="nav-link"></a>
                                            </li>
                                            <li class="nav-item"><a href="#" class="nav-link"></a>
                                            </li>
                                            <li class="nav-item"><a href="#" class="nav-link"></a>
                                            </li>
                                            <li class="nav-item dropdown res-dis-nn">

                                                <div role="menu" class="dropdown-menu animated zoomIn">
                                                    <a href="#" class="dropdown-item">Documentation</a>
                                                    <a href="#" class="dropdown-item">Expert Backend</a>
                                                    <a href="#" class="dropdown-item">Expert FrontEnd</a>
                                                    <a href="#" class="dropdown-item">Contact Support</a>
                                                </div>
                                            </li>
                                            <li class="nav-item"><a href="#" class="nav-link"></a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="col-lg-5 col-md-5 col-sm-12 col-xs-12">
                                    <div class="header-right-info">
                                        <ul class="nav navbar-nav mai-top-nav header-right-menu">
                                            <li class="nav-item">
                                                <a href="#" data-toggle="dropdown" role="button" aria-expanded="false"
                                                   class="nav-link dropdown-toggle">


                                                    <span class="admin-name" id="admin-name">用户管理</span>
                                                    <span class="admin-name2" id="admin-nam2"></span>
                                                </a>
                                                <ul role="menu"
                                                    class="dropdown-header-top author-log dropdown-menu animated zoomIn">
                                                    <li><a href="sysUser.html"><span
                                                            class="edu-icon edu-home-admin author-log-ic"></span><button>管理员信息</button></a>
                                                    <li><a><span
                                                            class="edu-icon edu-settings author-log-ic"></span><button  onclick="loginOut()">切换登录</button></a>
                                                    <li><a><span
                                                            class="edu-icon edu-settings author-log-ic" ></span><button onclick="loginOut()">退出登录</button>
                                                    </a></li>

                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container-fluid" style="padding: 20px 15px 0 15px;">


            <!-- 首页页面 -->

            <div id="modal">
            <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
            <div id="test0" style="width: 600px;height:400px; float: left"></div>
            <div id="test1" style="width: 600px;height:400px; float: left;"></div>
            <select id="status" style=" background: #0E993C;z-index:100;" onchange="get()">
                <option value=-1>全部</option>
                <option value=0 >近三十天</option>
                <option value=1 >近七天</option>
            </select>
            <div id="test2" style="width: 600px;height:400px; float: left;"></div>
            <div id="test3" style="width: 600px;height:400px; float: left"></div>
            </div>



            <!-- 尾部页面 -->


        </div>
    </div>
</div>

<!-- jquery
============================================ -->
<script src="js/vendor/jquery-1.12.4.min.js"></script>
<!-- bootstrap JS
============================================ -->
<script src="js/bootstrap.min.js"></script>
<!-- wow JS  动画效果js
============================================ -->
<script src="js/wow.min.js"></script>
<!-- price-slider JS
============================================ -->
<script src="js/jquery-price-slider.js"></script>
<!-- meanmenu JS
============================================ -->
<script src="js/jquery.meanmenu.js"></script>
<!-- owl.carousel JS
============================================ -->
<script src="js/owl.carousel.min.js"></script>
<!-- sticky JS
============================================ -->
<script src="js/jquery.sticky.js"></script>
<!-- scrollUp JS
============================================ -->
<script src="js/jquery.scrollUp.min.js"></script>
<!-- counterup JS
============================================ -->
<script src="js/counterup/jquery.counterup.min.js"></script>
<script src="js/counterup/waypoints.min.js"></script>
<script src="js/counterup/counterup-active.js"></script>
<!-- mCustomScrollbar JS
============================================ -->
<script src="js/scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="js/scrollbar/mCustomScrollbar-active.js"></script>
<!-- metisMenu JS
============================================ -->
<script src="js/metisMenu/metisMenu.min.js"></script>
<script src="js/metisMenu/metisMenu-active.js"></script>


<script src="js/sparkline/jquery.sparkline.min.js"></script>
<script src="js/sparkline/jquery.charts-sparkline.js"></script>
<script src="js/sparkline/sparkline-active.js"></script>
<!-- calendar JS
============================================ -->
<script src="js/calendar/moment.min.js"></script>

<script src="js/calendar/fullcalendar.min.js"></script>
<script src="js/calendar/fullcalendar-active.js"></script>
<!-- plugins JS
============================================ -->
<script src="js/plugins.js"></script>
<!-- main JS
============================================ -->
<script src="js/main.js"></script>

<!-- tawk chat JS  聊天系统js
<script src="js/tawk-chat.js"></script>
============================================ -->

<script src="js/data-table/bootstrap-table.js"></script>
<script src="js/data-table/bootstrap-table-zh-CN.js"></script>

<script src="js/notifications/Lobibox.js"></script>
<script src="js/datepicker/bootstrap-datetimepicker.min.js"></script>
<script src="js/datepicker/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="js/jquery.cookie.min.js"></script>

</body>
<script>


    //各类商品销售额占比
    var myChart0 = echarts.init(document.getElementById('test0'));
    var option={};
    myChart0.showLoading();
    function getGoodsPrice(){
        $.ajax({
            url: 'http://localhost:8080/count/goodsPrice',
            dataType: 'json',
            type: 'get',
            success: function(_data) {

                var dataName=[];
                var dataPrice=[];
                for (let i = 0; i <_data.length ; i++) {
                    dataName.push(_data[i].name);
                    dataPrice.push(_data[i].price);
                }

                // 指定图表的配置项和数据
                option ={
                    backgroundColor: '#bedea6',
                    title: {
                        text: '商品销售额'
                    },
                    tooltip: { trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                    },
                    xAxis: {
                        data: dataName,
                    },
                    yAxis: {},
                    series: [{
                        name: '销售额',
                        type: 'bar',
                        data: dataPrice,
                        itemStyle: {
                            color: "rgba(32, 215, 109, 1)"
                        }
                        // itemStyle: {
                        //     color:'#bedea6'
                        // }
                    }]
                };
                myChart0.hideLoading();
                myChart0.setOption(option);

            }
        })

    }
    getGoodsPrice();


    //各类商品销售数据占比
    var myChart = echarts.init(document.getElementById('test1'));
    var app = {};
    var option={};
    myChart.showLoading();

    function getGoodsCount() {

        $.ajax({
            url: 'http://localhost:8080/count/goodsCount',
            dataType: 'json',
            type: 'get',
            success: function(_data) {

                var dataName=[];
                var dataAll=[];
                for (let i = 0; i <_data.length ; i++) {
                    dataName.push(_data[i].name);
                    dataAll.push({value:_data[i].number,name:_data[i].name})
                }

                // 指定图表的配置项和数据
                    option = {
                    backgroundColor: '#2c343c',
                    title: {
                        text: '商品销售数据',
                        left: 'center',
                        textStyle:{
                            color: "#FF4500"
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        textStyle: {
                            color: "rgba(88, 183, 15, 1)",
                            fontWeight: "bolder"
                        },
                        data: dataName
                    },
                    series: [
                        {
                            name: '商品',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            roseType: 'angle',
                            data:dataAll ,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };


                app.currentIndex = -1;

                setInterval(function () {
                    var dataLen = option.series[0].data.length;
                    // 取消之前高亮的图形
                    myChart.dispatchAction({
                        type: 'downplay',
                        seriesIndex: 0,
                        dataIndex: app.currentIndex
                    });
                    app.currentIndex = (app.currentIndex + 1) % dataLen;
                    // 高亮当前图形
                    myChart.dispatchAction({
                        type: 'highlight',
                        seriesIndex: 0,
                        dataIndex: app.currentIndex
                    });
                    // 显示 tooltip
                    myChart.dispatchAction({
                        type: 'showTip',
                        seriesIndex: 0,
                        dataIndex: app.currentIndex
                    });
                }, 1000);
                if (option && typeof option === "object") {
                    myChart.hideLoading();
                    myChart.setOption(option, true);
                }

            }
        })
    }
    getGoodsCount();

    function getTime(t){

    var date = new Date(t);

    Y = date.getFullYear() + '-';

    M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';

    D = date.getDate() + ' ';

    return Y+M+D;

    }


    function getUserCount(){
        //用户日增数量
        var myChart2 = echarts.init(document.getElementById('test2'));
        var option1={};
        myChart2.showLoading();

        $.ajax({
            url: 'http://localhost:8080/count/UserCount',
            dataType: 'json',
            type: 'get',
            success: function(_data) {



                var dataNumber=[];
                var dataTime=[];
                for (let i = 0; i <_data.length ; i++) {
                    var time = getTime(_data[i].registerDate);
                    dataNumber.push(_data[i].number);
                    dataTime.push(time);
                }
                console.log(dataTime);

                // 指定图表的配置项和数据
                option1={
                    backgroundColor: '#a6ded9',
                    title: {
                        text: '用户日增曲线'
                    },
                    xAxis: {
                        data: dataTime,
                        axisLabel: {
                            interval:0,
                            rotate:40
                        }
                    },
                    yAxis: {},
                    series:[
                        {type: 'line',
                            data:dataNumber
                        }]
                };
                myChart2.hideLoading();
                myChart2.setOption(option1);

            }
        })
    }

    getUserCount();

    function getDay30User() {
        //用户日增数量
        var myChart2 = echarts.init(document.getElementById('test2'));
        var option1={};
        myChart2.showLoading();

        $.ajax({
            url: 'http://localhost:8080/count/UserCount30',
            dataType: 'json',
            type: 'get',
            success: function(_data) {

                var dataNumber=[];
                var dataTime=[];
                for (let i = 0; i <_data.length ; i++) {
                    var time = getTime(_data[i].registerDate);
                    dataNumber.push(_data[i].number);

                    dataTime.push(time);
                }
                console.log(dataTime);

                // 指定图表的配置项和数据
                option1={
                    backgroundColor: '#a6ded9',
                    title: {
                        text: '用户日增曲线'
                    },
                    xAxis: {
                        data: dataTime
                    },
                    yAxis: {},
                    series:[
                        {type: 'line',
                            data:dataNumber
                        }]
                };
                myChart2.hideLoading();
                myChart2.setOption(option1);

            }
        })
    }

    function getDay7User() {
        //用户日增数量
        var myChart2 = echarts.init(document.getElementById('test2'));
        var option1={};
        myChart2.showLoading();

        $.ajax({
            url: 'http://localhost:8080/count/UserCount7',
            dataType: 'json',
            type: 'get',
            success: function(_data) {

                var dataNumber=[];
                var dataTime=[];
                for (let i = 0; i <_data.length ; i++) {
                    var time = getTime(_data[i].registerDate);
                    dataNumber.push(_data[i].number);
                    dataTime.push(time);
                }

                // 指定图表的配置项和数据
                option1={
                    backgroundColor: '#a6ded9',
                    title: {
                        text: '用户日增曲线'
                    },
                    xAxis: {
                        data: dataTime
                    },
                    yAxis: {},
                    series:[
                        {type: 'line',
                            data:dataNumber
                        }]
                };
                myChart2.hideLoading();
                myChart2.setOption(option1);

            }
        })
    }

    function get() {
      var value = $("#status").val();
      if (value == -1){
          getUserCount()
      }else if (value == 0){
          getDay30User()
      }else if (value == 1){
          getDay7User()
      }

    }






    //购物车前十统计
    var myChart1 = echarts.init(document.getElementById('test3'));
    var option={};
    myChart1.showLoading();

    function getCartCount(){
        $.ajax({
            url: 'http://localhost:8080/count/cartCount',
            dataType: 'json',
            type: 'get',
            success: function(_data) {

                var dataName=[];
                var dataPrice=[];

                for (let i = 0; i <_data.length ; i++) {

                    dataName.push(_data[i].goods);
                    dataPrice.push(_data[i].number);
                }


                // 指定图表的配置项和数据
                option={
                    backgroundColor: '#dea6da',
                    title: {
                        text: '用户购物车前十统计'
                    },
                    tooltip: { trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                    },
                    xAxis: {
                        data: dataName,
                        axisLabel: {
                            interval:0,
                            rotate:40
                        }
                    },
                    yAxis: {},
                    series: [{
                        name: '销量',
                        type: 'bar',
                        data: dataPrice,
                        itemStyle: {
                            color: "rgba(181, 103, 149, 1)"
                        }
                    }]
                };
                myChart1.hideLoading();
                myChart1.setOption(option);

            }
        })

    }

    getCartCount();

    function loginOut(){

        $.ajax({
            url:'http://localhost:8080/sysUser/loginOut',
            method:'get',
            success:function (_data) {
                alert(_data.msg);
                $.cookie('frontedUsername','',path='/');
                window.location="/shop/login.html";
            }

        })
    }
    $('#admin-name').hide();
    $('#admin-nam2').html('欢迎你'+$.cookie('frontedUsername'));


</script>
</html>